<template>
	<div class="home-list">
		<div v-transfer-dom>
      <loading :show="isLoading" text="数据加载中..."></loading>
    </div>
		<scroll ref="scroll"
              :data="listData"
              :scrollbar="scrollbarObj"
              :pullUpLoad="pullUpLoadObj"
              :startY="parseInt(startY)"
							:isShow="1"
              @pullingUp="onPullingUp">
		<div slot="content">
			<swiper loop auto style="width: 100%;z-index: 1;"  dots-position="center">
				<swiper-item class="swiper-demo-img" v-for="(item, index) in baseList" :key="index"><img :src="item.img" style="width:100%;height:100%;"></swiper-item>
			</swiper>
			<header-component v-bind:style="header_style" :class="transparent">      
			</header-component>
			<section class="msite_list">
				<div class="msite_item">
					<div class="tianqi">
						<div class="tianqi_left">
							<img :src="tianqi" alt="天气" style="width:25px;height:25px;">
							<span style="color:#979797;font-size:18px;">{{temp+'℃'}}</span>
							<span style="color:#979797;font-size:18px;">{{weather}}</span>
						</div>
						
						<div class="tianqi_right">
							<span style="color:#979797;font-size:14px;">客服电话:</span>
							<a href="tel:4007333318"><span style="color:#979797;font-size:14px;">400  733  3318</span></a>
							<!-- <img :src="arrow_right" alt="查看更多" style="width:20px;height:20px;vertical-align:middle"> -->
						</div>
					</div>
					<ul class="flex-ul">
						<li v-for="(item,key) in msiteList" :key="key" :class="'item'+item.id">
							<router-link :to="{path:'/merchantslist',query:{id:item.id,title:item.title}}" style="display:block;width:100%;height:100%;">
								<figure  class="icon_class" >
									<img :src="item.src" :alt="item.title" >
									<figcaption >
										<h3>{{item.title}}</h3>
										<p>{{item.desc}}</p>
										<p v-if="item.text" style="margin-top:.3rem;">{{item.text}}</p>
									</figcaption>
								</figure>
							</router-link>
						</li>
					</ul>
				</div>
				<!-- <div style="position: relative;top: -35px;text-align: center;background-color: #fff;border-radius: 20px 20px 0px 0px;border-top: 1px solid #ccc;box-shadow: 0px -2px 9px #888888;z-index: 100;pading-bottom:35px;">
					<div class="list-header">
						<div class="list_left">
							<span style="color:#278672;font-weight:900;">
								/
							</span>
							<span style="color:#000;">
								为您推荐
							</span>
						</div>
					</div>
					
				</div> -->
			</section>
			</div>
			</scroll>
			<footer-component></footer-component>
	</div>
</template>
<script>
import { mapGetters,mapActions } from 'vuex'
import HeaderComponent from 'components/header'
import FooterComponent from 'components/footer'
import { Swiper, SwiperItem,Loading, TransferDomDirective as TransferDom } from 'vux'
import {setStore, getStore} from '@/config/mUtils'
import Scroll from 'components/scroll/scroll.vue'
// 重定向url 地址
import {url,appId} from '@/config/config'
// 模拟数据
const baseList = [{
	url: 'javascript:',
	img: require('@/assets/slide1.jpg')
}, {
	url: 'javascript:',
	img: require('@/assets/slide2.jpg')
}, {
	url: 'javascript:',
	img: require('@/assets/slide3.jpg')
}]
const msiteList = [{
	id:1,
	src: require('@/assets/chi.png'),
	title: '吃在浔龙河',
	desc: '湖南范儿',
	text: '发现长沙生活方式'
}, {
	id:2,
	src: require('@/assets/zhu.png'),
	title: '住在浔龙河',
	desc: '慢生活的世界',
	text: ''
}, {
	id:3,
	src: require('@/assets/wan.png'),
	title: '玩在浔龙河',
	desc: '有趣的人生体会',
	text: ''
}, {
	id:4,
	src: require('@/assets/le.png'),
	title: '乐在浔龙河',
	desc: '有趣的人生体会',
},{
	id:5,
	src: require('@/assets/gou.png'),
	title: '购在浔龙河',
	desc: '有趣的人生体会',
}]
export default {
	name: 'merchantslist',
	directives: {
    TransferDom
  },
	components: {
		HeaderComponent,
		Swiper,
		SwiperItem,
		FooterComponent,
		Loading,
		Scroll
	},
	data () {
		return {
			baseList: baseList,
			header_style: 'z-index:999;background-color:transparent;',
			msiteList: msiteList,
			listData: [],
			isLoading: false,
			transparent: 'transparent',
			weather: null,
			temp: null,
			tianqi: require('@/assets/tianqi.png'),
      page: 1,
			// 滚动配置
			scrollbar: true,
      scrollbarFade: true,
      pullUpLoad: true,
      pullUpLoadThreshold: 0,
      pullUpLoadMoreTxt: '上拉加载更多数据',
      pullUpLoadNoMoreTxt: '没有更多数据了',
      startY: 0
		}
	},
	created() {
		// this.listData = []
		this.tianqiInitData();
		if(this.getLocation.longitude && this.getLocation.latitude){
			if(this.getWxCode){
			this.initData(this.getLocation.longitude,this.getLocation.latitude,'?code=',this.getWxCode)
			}else if(getStore('wxcode')){
				this.initData(this.getLocation.longitude,this.getLocation.latitude,'?openId=',getStore('wxcode'))
			}else if(!getStore('wxcode') && !this.getWxCode){
				let that = this;
				this.isLoading = false
				// closeWindow
				this.$vux.confirm.show({
					title: '没有授权',
					content: '请允许授权',
					onCancel () {
						that.$wechat.closeWindow();
					},
					onConfirm () {
						window.location.href= `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(url)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
					}
				});
			}
		}else{
			if(this.getWxCode){
				this.initData('113.1872558','28.344229','?code=',this.getWxCode)
			}else if(getStore('wxcode')){
				this.initData('113.1872558','28.344229','?openId=',getStore('wxcode'))
			}else  if(!getStore('wxcode') && !this.getWxCode){
				let that = this;
				this.isLoading = false
				// closeWindow
				this.$vux.confirm.show({
					title: '没有授权',
					content: '请允许授权',
					onCancel () {
						that.$wechat.closeWindow();
					},
					onConfirm () {
						window.location.href= `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(url)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
					}
				});
			}
		}
  },
	mounted(){
		// 判断是否获取了地址获取了地址才能获取商家数据
		// this.tianqiInitData();
		// if(this.getLocation.longitude && this.getLocation.latitude){
		// 	if(this.getWxCode){
		// 	this.initData(this.getLocation.longitude,this.getLocation.latitude,'?code=',this.getWxCode)
		// 	}else if(getStore('wxcode')){
		// 		this.initData(this.getLocation.longitude,this.getLocation.latitude,'?openId=',getStore('wxcode'))
		// 	}else{
		// 		let that = this;
		// 		this.isLoading = false
		// 		// closeWindow
		// 		this.$vux.confirm.show({
		// 			title: '没有授权',
		// 			content: '请允许授权',
		// 			onCancel () {
		// 				that.$wechat.closeWindow();
		// 			},
		// 			onConfirm () {
		// 				window.location.href= `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(url)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
		// 			}
		// 		});
		// 	}
		// }else{
		// 	if(this.getWxCode){
		// 		this.initData('113.1872558','28.344229','?code=',this.getWxCode)
		// 	}else if(getStore('wxcode')){
		// 		this.initData('113.1872558','28.344229','?openId=',getStore('wxcode'))
		// 	}else{
		// 		let that = this;
		// 		this.isLoading = false
		// 		// closeWindow
		// 		this.$vux.confirm.show({
		// 			title: '没有授权',
		// 			content: '请允许授权',
		// 			onCancel () {
		// 				that.$wechat.closeWindow();
		// 			},
		// 			onConfirm () {
		// 				window.location.href= `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(url)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
		// 			}
		// 		});
		// 	}
		// }
	},
	computed: {
		...mapGetters([
			// 'getScroll',
			'getLocation',
			'getWxCode'
		]),
		scrollbarObj: function () {
      return this.scrollbar ? {fade: this.scrollbarFade} : false
    },
    pullUpLoadObj: function () {
      return this.pullUpLoad ? {
        threshold: parseInt(this.pullUpLoadThreshold),
        txt: {more: this.pullUpLoadMoreTxt, noMore: this.pullUpLoadNoMoreTxt}
      } : false
    }
	},
	methods:{
		...mapActions([
			'setBindPhone',
			'setBp'
		]),
    onPullingUp() {
      this.page++
    },
    rebuildScroll() {
      this.$nextTick(() => {
        this.$refs.scroll.destroy()
        this.$refs.scroll.initScroll()
      })
    },
		initData(lng,lat,urls='?openId=',data=getStore('wxcode')){
			this.isLoading = true
			this.$http.get(`index/lng/${lng}/lat/${lat}/pageCount/${this.page}/${urls}${data}`)
				.then(({data})=>{
					if(data.status == 200){
						// 设置绑定手机号码
						this.setBindPhone(data.data.cellphone)
						// 设置积分
						this.setBp(data.data.bp)
						// 设置openid
						if(data.data.openId){
							setStore('wxcode',data.data.openId)
						}
						if(data.data.nickname){
							setStore('nickname',data.data.nickname)
						}
						if(data.data.avatar){
							setStore('avatar',data.data.avatar)
						}
						if(!isNaN(data.data.bindMobile)){
							setStore('bindMobile',data.data.bindMobile)
						}
						if(data.data.shopList === null){
							this.$vux.toast.show({
								type: 'warn',
								text: '没有更多数据了',
								time: 2000
							})
							this.$refs.scroll.forceUpdate(false)
						}else{
							this.listData = this.listData.concat(data.data.shopList)
						}
						this.isLoading = false
					}
				}).catch(err=>{
					this.isLoading = false
					if(err.data.status === '10000'){
						setTimeout(()=>{
							window.location.href= `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(url)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
						},1000)
				}
			})
		},
		tianqiInitData(){
			var url = 'http://jisutqybmf.market.alicloudapi.com/weather/query?city=长沙'
			this.$http.get(url,{headers:{ 'Authorization': 'APPCODE ' + '891d6f00ed704d9d948fdf801bd81165'}})
			.then(res=>{
				if(res.data.result.weather && res.data.result.temp){
					this.weather = res.data.result.weather
					this.temp = res.data.result.temp
				}
			}).catch(err=>{
				if(err.data.result.weather && err.data.result.temp){
					this.weather = err.data.result.weather
					this.temp = err.data.result.temp
				}
			})
		}
	},
	watch: {
		// 监听滚动
		// getScroll (val) {
		// 	if (val > 25) {
		// 		this.header_style = 'z-index:999;'
		// 		this.transparent = ''
		// 	} else {
		// 		this.header_style = 'z-index:999;background-color:transparent;'
		// 		this.transparent = 'transparent'
		// 	}
		// },
		getLocation(val){
			// 监听是否获取到了地址
			if(val.longitude && val.latitude){	
				if(this.getWxCode){
					this.initData(val.longitude,val.latitude,'?code=',this.getWxCode)
				}else if(getStore('wxcode')){
					this.initData(val.longitude,val.latitude,'?openId=',getStore('wxcode'))
				}else  if(!getStore('wxcode') && !this.getWxCode){
					let that = this;
					this.isLoading = false
					// closeWindow
					this.$vux.confirm.show({
						title: '没有授权',
						content: '请允许授权',
						onCancel () {
							that.$wechat.closeWindow();
						},
						onConfirm () {
							window.location.href= `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(url)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
						}
					});
				}
			}else{
				if(this.getWxCode){
					this.initData('113.1872558','28.344229','?code=',this.getWxCode)
				}else if(getStore('wxcode')){
					this.initData('113.1872558','28.344229','?openId=',getStore('wxcode'))
				}else  if(!getStore('wxcode') && !this.getWxCode){
					let that = this;
					this.isLoading = false
					// closeWindow
					this.$vux.confirm.show({
						title: '没有授权',
						content: '请允许授权',
						onCancel () {
							that.$wechat.closeWindow();
						},
						onConfirm () {
							window.location.href= `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(url)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
						}
					});
				}
			}
		},
		scrollbarObj: {
      handler() {
        this.rebuildScroll()
      },
      deep: true
    },
    pullUpLoadObj: {
      handler() {
        this.rebuildScroll()
      },
      deep: true
    },
    startY() {
      this.rebuildScroll()
    },
		page(){
			if(this.getLocation.longitude && this.getLocation.latitude){
			if(this.getWxCode){
			this.initData(this.getLocation.longitude,this.getLocation.latitude,'?code=',this.getWxCode)
			}else if(getStore('wxcode')){
				this.initData(this.getLocation.longitude,this.getLocation.latitude,'?openId=',getStore('wxcode'))
			}else  if(!getStore('wxcode') && !this.getWxCode){
				let that = this;
				this.isLoading = false
				// closeWindow
				this.$vux.confirm.show({
					title: '没有授权',
					content: '请允许授权',
					onCancel () {
						that.$wechat.closeWindow();
					},
					onConfirm () {
						window.location.href= `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(url)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
					}
				});
			}
		}else{
			if(this.getWxCode){
				this.initData('113.1872558','28.344229','?code=',this.getWxCode)
			}else if(getStore('wxcode')){
				this.initData('113.1872558','28.344229','?openId=',getStore('wxcode'))
			}else  if(!getStore('wxcode') && !this.getWxCode){
				let that = this;
				this.isLoading = false
				// closeWindow
				this.$vux.confirm.show({
					title: '没有授权',
					content: '请允许授权',
					onCancel () {
						that.$wechat.closeWindow();
					},
					onConfirm () {
						window.location.href= `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(url)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
					}
				});
			}
		}
		}
	}
}
</script>
<style scoped>
.msite_list{
	
}
.msite_item{
	position: relative;
	top: -25px;
	z-index: 10;
	padding: .6rem .46rem 1.2rem .46rem;
	height: 8rem;
	border-radius: 25px 25px 0px 0px;
	background-color: #fff;
}

span{
	font-size: 16px;
	color: #2b2b2b;
}
.tianqi{
	display: flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	justify-content:space-between;
	-webkit-justify-content:space-between;
	flex-wrap: nowrap;
	-webkit-flex-wrap: nowrap;
	margin-bottom: .2rem;
}
.flex-ul{
	display: block;
	list-style: none;
}
.flex-ul > li{
	position: absolute;
	display: inline-block;
}
.flex-ul .item1{
	left: 3.57%;
	height: 65%;
	width: 32%;
}
.flex-ul .item2{
	left: 35.7%;
}
.flex-ul .item3{
	left: 66%;
}
.flex-ul .item4{
	left: 35.7%;
	top: 56%;
}
.flex-ul .item5{
	left: 66%;
	top: 56%;
}
.flex-ul .item2,.flex-ul .item3,.flex-ul .item4,.flex-ul .item5{
	width: 28%;
	height: 29%;
	margin-left: .3rem;
}
figure.icon_class{
	width: 100%;
	height: 100%;
}
figure.icon_class img{
	width: 100%;
	height: 100%;
}
figure.icon_class figcaption{
	position: absolute;
	top: 0rem;
	font-size: 0.42rem;
	width: 100%;
	color: #fff;
	border-radius: .3rem;
	height: 100%;
	text-align: left;
	background-color: rgba(0,0,0,.6);
}
.flex-ul .item1 figcaption h3{
	margin-top: .6rem;
	margin-bottom: 1.2rem;
	margin-left: .3rem;
}
.flex-ul figcaption p{
	margin-left: .3rem;
}
.flex-ul .item2 figcaption h3,.flex-ul .item3 figcaption h3,.flex-ul .item4 figcaption h3,.flex-ul .item5 figcaption h3{
	margin-left: .3rem;
	margin-top: .3rem;
	margin-bottom: .4rem;
}
.home-list #vux_view_box_body{
	padding: 0rem;
}
</style>

